<template>
  <div class="SearchCompany">
    <el-row>
      <el-col :span="24" class="carousel-title">
        <p>什么值得投</p>
      </el-col>
      <el-col :span="24">
        <el-carousel :interval="5000" arrow="always" class="carousel" :autoplay="false">
          <el-carousel-item v-for="item in 4" :key="item">
            <div style="width:90%;margin:0em auto;">
              <div class="card-box" v-for="item in 5" :key="item">
                <el-card :body-style="{ padding: '8px' }" class="carousel-company">
                  <img src="../../assets/img/home/pic2.jpg" style="width:100%;display:block;">
                  <p style="padding:10px;text-align:center;">
                    我们的梦想就是帮别人实现梦想
                  </p>
                </el-card>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="ContentSpan" :offset="ContentOffset">
        <el-row class="searchInput">
          <el-col :span="16" :offset="4">
            <el-input placeholder="请输入公司名称" v-model="companyName" size="large">
              <el-button slot="append" icon="search" @click="getCompanyList(1)">搜索</el-button>
            </el-input>
          </el-col>
        </el-row>
        <!-- <div class="searchList">
          <el-row :gutter="20" style="margin-left:0px; margin-right:0px;" v-for="(list,index) in selectlistJosn[0].list" :key="index">
            <el-col :span="22" :offset="1" class="searchList-item">
              <span class="searchTitle">{{list.name}}</span>
              <span :id="`${list.id}`">
                <span v-for="(item,index) in list.list" :key="index" :class="item.class" @click="Search(list.label,item.val,list.id)" :id="`${list.id}-${item.val}`">{{item.name}}</span>
              </span>
            </el-col>
          </el-row>
        </div> -->
        <div class="campany-box" v-for="(item,index) in companyList" :key="index">
          <div class="company-card" @click="toCompanyDetail(item.id)">
            <div style="height:130px;padding:10px">
              <div class="company-logo">
                <img src="../../assets/img/company/logo.jpg">
              </div>
              <div class="company-info">
                <h3>{{item.company_name}}</h3>
                <p class="tag">——{{item.industry_name}}</p>
                <p>{{item.company_publicity}}</p>
              </div>
            </div>
            <div class="card-footer">
              <div class="footer-item-A">
                <i class="fa fa-th-large iconstyle"></i>{{item.company_type}}
              </div>
              <div class="footer-item-B">
                <i class="fa fa-map-marker iconstyle"></i>{{item.company_address}}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="10">
        <div class="page-no-style">
          <el-pagination @current-change="handleCurrentChange" layout="total,prev,pager,next" :total="total"
                         :page-size="20"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import Data from '../../assets/file/searchJob.json'

  export default {
    name: 'SearchCompany',
    data () {
      return {
        ContentSpan: 0,
        ContentOffset: 0,
        shwoDisplay: false,
        companyName: '',
        companyList: [],
        page_no: 1,
        total: 0,
        Selectlist: {work_years: '', education: '', salary: '', job_title: '', companyName: ''},
        selectlistJosn: [],
        searchjobVal: '0-'
      }
    },
    created () {
      this.selectlistJosn = Data
      this.ContentSpan = this.$store.state.Resolution
      this.ContentOffset = this.$store.state.ContentOffset
      this.getCompanyList(1)
    },
    methods: {
      getCompanyList (pageNum) {
        let _this = this
        let params = new Object()
        if (_this.companyName !== '') {
          params.company_name = _this.companyName
        }
        params.page_no = pageNum
        params.page_size = 20
        postDataToServer('HM_COMPANY_LISTPAGE', params).then(function (data) {
          if (data.status === 0) {
            _this.total = data.total_results
            data.data_list.forEach((item) => {
              item.company_type = getStaticMapList('company_type', item.company_type)
            })
            _this.companyList = data.data_list
          }
        })
      },
      Search (label, val, id) {
        this.Selectlist[label] = val
        this.getCompanyList(1)
        this.searchjobVal = id + '-' + val
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      toCompanyDetail (id) {
        this.$router.push({'path': '/companyinfo/' + id})
      }
    },
    watch: {
      searchjobVal (val, oldVal) {
        let objArr = document.getElementById(val[0]).getElementsByTagName('span')
        for (let i = 0; i < objArr.length; i++) {
          objArr[i].className = 'optionA'
        }
        document.getElementById(val).className = 'optionB'
      },
      page_no (val, oldVal) {
        this.getCompanyList(val)
      }
    }
  }
</script>

<style scoped>
  /*图片轮播样式*/
  .carousel-title {
    opacity: 0.8;
    color: #FFFFFF;
    font-size: 30px;
    text-shadow: 3px 5px 10px #105AB9;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 1em 0em 0.2em;
    background-color: #20A0FF;
  }

  .carousel {
    margin-bottom: 2em;
  }

  .el-carousel__item {
    opacity: 0.8;
    text-align: center;
    margin: 0;
    background-color: #20A0FF;
  }

  .card-box {
    width: 20%;
    float: left;
    text-align: center;
    margin-top: 2em;
  }

  .carousel-company {
    background: #CCF0E8;
    width: 80%;
    margin: 0em auto;
  }

  .carousel-company img {
    width: 100%;
    height: 140px;
  }

  /*公司信息卡片样式*/
  .searchInput {
    margin: 2em auto;
  }

  .campany-box {
    width: 50%;
    float: left;
    margin: 1em 0em;
  }

  .company-card {
    width: 90%;
    margin: 0em auto;
    border: 1px solid #EDEDED;
    padding: 10px 0px 0px 0px;
  }

  .company-card:hover {
    border: 1px solid #20A0FF;
  }

  .company-logo {
    width: 40%;
    float: left;
    text-align: center;
  }

  .company-logo img {
    width: 130px;
    height: 140px;
    border: 1px solid #EDEDED;
  }

  .company-logo img {
    cursor: pointer;
  }

  .company-info {
    width: 60%;
    float: left;
  }

  .company-info .tag {
    text-align: right;
    padding-right: 2em;
    font-size: 13px;
    color: #00c1de;
    margin-bottom: 1em;
  }

  .company-info h3 {
    margin: 1em auto;
    letter-spacing: 5px;
  }

  .company-info span {
    font-size: 18px;
    font-weight: 600;
    margin-right: 15px;
    color: #20A0FF;
  }

  .company-info h3:hover {
    color: #20A0FF;
    cursor: pointer;
  }

  .introduce {
    padding: 0px 30px;
    height: 50px;
  }

  .card-footer {
    background: #FAFAFA;
    color: #999999;
    margin-top: 1em;
    height: 2.5em;
  }

  .footer-item-A {
    width: 40%;
    float: left;
    line-height: 2.5em;
    text-align: center;
    padding: 20px auto;
  }

  .footer-item-B {
    width: 60%;
    float: left;
    line-height: 2.5em;
    text-align: center;
    padding: 20px auto;
  }

  .iconstyle {
    color: #999999;
    margin-right: 10px;
  }
</style>
